<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.businessKey" placeholder="询价单号、客户、客户编号、零件名称" style="width: 300px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
    </div>
    <el-tabs v-model="tabs.activeName" type="card" @tab-click="tabsClick">
      <el-tab-pane label="所有" name="ALL" />
      <el-tab-pane name="WAITING">
        <span slot="label">询价中<el-badge :value="200" :max="99" /></span>
      </el-tab-pane>
      <el-tab-pane label="已完成" name="DONE" />
    </el-tabs>
    <el-table v-loading="listLoading" stripe :data="list" element-loading-text="拼命加载中" border fit highlight-current-row>
      <el-table-column type="selection" width="40" />
      <el-table-column align="center" fixed="left" label="询价单号" width="170">
        <template slot-scope="scope">
          <router-link :to="'/quotation/clerkDetail/'+scope.row.id">
            {{ scope.row.businessKey }}
          </router-link>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="left" width="160">
        <template slot-scope="scope">
          {{ scope.row.startTime }}
        </template>
      </el-table-column>
      <el-table-column label="处理时间">
        <template slot-scope="scope">
          {{ scope.row.taskDueTime }}分
        </template>
      </el-table-column>
      <el-table-column label="客户编号">
        <template slot-scope="scope">
          {{ scope.row.cnumber }}
        </template>
      </el-table-column>
      <el-table-column label="客户">
        <template slot-scope="scope">
          <span>{{ scope.row.inquirerName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="零件款数" width="100" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.partCount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="零件件数" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.partTotalCount }}
        </template>
      </el-table-column>
      <el-table-column label="内部名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.innerName }}
        </template>
      </el-table-column>
      <el-table-column label="处理状态/处理人" width="150" align="center">
        <template slot-scope="scope">
          {{ scope.row.currentStep }} / {{ scope.row.currentDealPerson }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="110" align="center" fixed="right">
        <template slot-scope="scope">
          <router-link :to="'/quotation/clerkDetail/'+scope.row.id">
            <el-button type="primary" size="mini">处理</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <div class="mt">
      <el-pagination
        background
        :current-page.sync="page"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getAllRecordList } from '@/api/record'

export default {
  data() {
    return {
      tabs: {
        activeName: 'ALL'
      },
      listQuery: {
        businessKey: undefined
      },
      list: [
        {
          'id': 'b736e6b5-bff6-11ea-86ee-00163e08153c',
          'businessKey': 'SQ6161594087694030',
          'name': 'APH100-012-0008spring',
          'innerName': '顶盖',
          'procType': 'Quotation',
          'startUser': 'b2732785-0480-468f-8241-9873ec1533c7',
          'startTime': '2020-07-07 10:08:14',
          'status': 'waitingQuote',
          'currentStep': 'step3',
          'currentDealPerson': '欧海玉',
          'currentStepDealPerson': 'step3(欧海玉)',
          'presale': 'ede84524-e5da-4536-8624-a8b4bf0895bc',
          'customer': 'b2732785-0480-468f-8241-9873ec1533c7',
          'source': '平台',
          'importantFlag': 'NO',
          'partCount': 2,
          'userLevel': 'C',
          'procSource': 'CNC',
          'cnumber': '06508',
          'deliveryTimeChangeStatus': 'UNCHANGED',
          'inquirerName': '金海',
          'inquirerCompany': '清华大学',
          'orderSize': 'DESIGN',
          'partTotalCount': 3,
          'taskDueTime': 10
        }
      ],
      listLoading: false,
      page: 1,
      total: 1,
      pageSize: 10
    }
  },
  created() {
    // this.fetchData(1)
  },
  methods: {
    tabsClick(tab, event) {
      console.log(tab, event)
    },
    handleCurrentChange(page) {
      this.fetchData(page)
    },
    handleFilter() {
      this.page = 1
      this.fetchData(this.page)
    },
    fetchData(page) {
      this.page = page
      this.listLoading = true
      const pageSize = this.pageSize
      const params = {
        page,
        pageSize,
        recordUid: this.listQuery.recordUid,
        userNickname: this.listQuery.userNickname
      }
      getAllRecordList(params).then(res => {
        this.listLoading = false
        if (res.code === 20000) {
          this.list = res.datas
          this.total = res.total
        } else {
          this.$message('没有数据')
        }
      })
    }
  }
}
</script>

